<template>
  <div class="rootgl" v-if="ggzl">
    <div v-for="(item, index) in ggzl" :key="index">
      <p>
        <span>{{ item.title }}</span
        ><img
          :id="item.list[0].id_param"
          @click="ggllist(item.list[0].id_param)"
          class="qbsp"
          :src="item.rigth_img.image"
          alt=""
        />
      </p>
      <div
        :class="{ glfl: true, glfl2: item.title == '热门品牌' }"
        :id="v.id_param || v.target.param"
        v-for="v in item.list"
        :key="v.id_param"
        @click="ggllist(v.id_param || v.target.param)"
        v-lazy-container="{
          selector: 'img',
          error: 'https://wap.epet.com/app/images/error.png',
          loading: 'https://wap.epet.com/app/images/loading.png',
        }"
      >
        <img class="glphoto" :data-src="v.photo || v.logo" alt="" />
        <p class="ggzltit">{{ v.name }}</p>
      </div>
    </div>
    <a class="zwzd"></a>
  </div>
</template>

<script>
export default {
  name: "zlandrm",
  data() {
    return {
      ggzl: null,
      zlrm: null,
    };
  },
  props: ["ingg"],
  methods: {
    async ggll() {
      let ggzl = await this.axios({
        url: `https://mallcdn.api.epet.com/v3/goods/category/main.html?do=getChildren&owner=${this.ingg}&pet_type=dog&issite=true&version=358&system=wap&isWeb=1&distinct_id=17c2b39bc8d274-022dcac363853b8-17466957-230400-17c2b39bc8e91c&_=1633089395366`,
      });
      this.ggzl = ggzl.data.cate_list;
        // console.log(ggzl.data.cate_list);
    },
    ggllist(a) {
      this.zlrm = parseInt(a);
      if (parseInt(a)) {
        // console.log("三大狗粮");
        this.$router.push({
          name: "rmpp",
          query: {
            name: this.zlrm,
          },
        });
      }

      if (!parseInt(a)) {
        this.zlrm = parseInt(a.split("_")[1]);
        this.$router.push({
          name: "glsplb",
          query: {
            name: this.zlrm,
          },
        });
      }
    },
  },

  created() {
    this.ggll();
  
  },
  watch: {
    ingg() {
      this.ggll();
    },
  },
};
</script>

<style lang="less" scoped>
.rootgl {
  margin-top: 0.75rem;
  padding: 0 0.2rem;
  border-top: 0.08rem solid rgb(236, 235, 235);
  border-left: 0.08rem solid rgb(236, 235, 235);
  > div {
    text-align: left;
    > div {
      text-align: center;
    }
    > p {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .qbsp {
      width: 0.92rem;
      height: 0.2rem;
    }
  }
  .ggzltit {
    margin: 0;
  }
}
.glphoto {
  width: 1.74rem !important;
}
.glfl {
  display: inline-block;
  width: 33%;
}
.glfl2 {
  display: inline-block;
  width: 50%;
  height: 1.5rem;
}
.zwzd {
  display: block;
  width: 100%;
  height: 1.0466rem;
}
</style>